// main.js
import './style.css';
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { XYZ } from 'ol/source';
import VectorLayer from 'ol/layer/Vector';
import Feature from 'ol/Feature'; // 添加此行
import Point from 'ol/geom/Point'; // 添加此行
import { Style, Icon } from 'ol/style'; // 修改此行
import Vector from 'ol/source/Vector'; // 确保正确引用
import Fill from 'ol/style/Fill'
import CircleStyle from 'ol/style/Circle'
import Text from 'ol/style/Text'
import { Circle, LineString } from 'ol/geom';
import VectorSource from 'ol/source/Vector'
import Stroke from 'ol/style/Stroke.js';
import Polygon from 'ol/geom/Polygon.js';

const view = new View({
  center: [114.25, 30.59],
  zoom: 6,
  projection: "EPSG:4326"
});
// 高德地图底图
const gaodeSource = new XYZ({
  url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
});
const gaodeLayer = new TileLayer({
  source: gaodeSource
});
const map = new Map({
  target: 'map',
  view,
  layers: [gaodeLayer]
});


// 绘制一个面要素（圆）
const circleFeature = new Feature({
  geometry: new Circle([114.25, 30.59], 3,)
});
circleFeature.setStyle(
  new Style({
    fill: new Fill({
      color: 'rgba(255, 255, 0, 0.3)'
    }),
    stroke: new Stroke({
      color: 'rgb(61, 219, 40)',
      width: 2
    })
  })
)
const vectorSource = new VectorSource({
  features: [circleFeature]
});
const vectorLayer = new VectorLayer({
  source: vectorSource
});
map.addLayer(vectorLayer)
// 画多边形用Polygon
